<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
    <li>我是li01</li>
    <li>我是li02</li>
    <li>我是li03</li>
    <li>我是li04</li>
    <li>我是li05</li>
  </ul>

  <button class="innerHTML">innerHTML添加</button>
  <button class="appendchild">appendchild添加</button>




  <script>
    let ul = document.querySelector("ul");
    // DOM节点：修改文本、修改类名、绑定事件
    let li = document.querySelectorAll("li");
    // nodelist [DOM节点、DOM节点、DOM节点]
    let innerHTML = document.querySelector(".innerHTML");
    let appendchild = document.querySelector(".appendchild");

    innerHTML.addEventListener("click", function () {
      let newli = `<li>123</li>`;
      ul.innerHTML += newli;
    })

    appendchild.addEventListener("click", function () {
      let newli = document.createElement("li");
      newli.innerText = `hahaha`;
      ul.appendChild(newli);

      // newli.classList
      // newli.addEventListener()
    })

    // 可以通过createElement创建DOM节点            
    // 使用innerText、classList、addEventListener()



    li.forEach((item) => {
      item.addEventListener("click", function () {
        console.log("ww");
      })
    })



  </script>
</body>

</html>